import { Card, Button } from 'antd';
// import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from 'react';

import aMap from '@/utils/map';

// let map: any;
const Index = () => {
  useEffect(() => {
    aMap.init([120.26408, 30.305451], 'container').then(() => {
      aMap.marker([120.26408, 30.305451]);
      aMap.scalse();
    });
    // 要写在组件加载完成以后
    // AMapLoader.load({
    //   key: '6b74f591f4d0121f7152c2c1f29e4781', // 申请好的Web端开发者Key，首次调用 load 时必填
    //   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //   plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    // })
    //   .then((AMap) => {
    //     // 传入元素的类名得到地图实例
    //     map = new AMap.Map('container', {
    //       zoom: 16, //级别
    //       center: [120.26408, 30.305451], //中心点坐标
    //       // viewMode: '3D', //使用3D视图
    //       mapStyle: 'amap://styles/dark', //设置地图的显示样式
    //     });

    //     //实时路况图层
    //     // const trafficLayer = new AMap.TileLayer.Satellite({
    //     //   zIndex: 10,
    //     // });
    //     // map.add(trafficLayer); //添加图层到地图

    //     // 点标记
    //     // const marker = new AMap.Marker({
    //     //   position: [120.26408, 30.305451], //位置
    //     // });
    //     // map.add(marker); //添加到地图

    //     const marker = new AMap.Marker({
    //       // icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F23%2F20210723125859_f6b2f.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670664624&t=bc5696cd069a1c53d969f83778610c2b',
    //       position: [120.26408, 30.305451],
    //     });
    //     map.add(marker);

    //     const circle = new AMap.Circle({
    //       center: new AMap.LngLat('120.26408', '30.305451'), // 圆心位置
    //       radius: 1000, //半径
    //       strokeColor: '#F33', //线颜色
    //       strokeOpacity: 1, //线透明度
    //       strokeWeight: 3, //线粗细度
    //       fillColor: '#ee2200', //填充颜色
    //       fillOpacity: 0.35, //填充透明度
    //     });
    //     map.add(circle);

    //     // 折线矢量图
    //     const lineArr = [
    //       [120.26408, 30.305451],
    //       [120.264242, 30.30576],
    //       [120.266313, 30.306056],
    //       [120.266409, 30.30783],
    //       [120.262681, 30.307941],
    //     ];
    //     const polyline = new AMap.Polyline({
    //       path: lineArr, //设置线覆盖物路径
    //       strokeColor: '#3366FF', //线颜色
    //       strokeWeight: 5, //线宽
    //       strokeStyle: 'solid', //线样式
    //     });
    //     map.add(polyline);

    //     // 地图事件
    //     // map.on('click', (e: any) => {
    //     //   console.log(e);
    //     //   const marker = new AMap.Marker({
    //     //     position: [e.lnglat.lng, e.lnglat.lat], //位置
    //     //   });
    //     //   map.add(marker); //添加到地图
    //     // });

    //     // 标记事件
    //     // marker.on("click", () => {})

    //     AMap.plugin('AMap.ToolBar', function () {
    //       //异步加载插件
    //       const toolbar = new AMap.ToolBar();
    //       map.addControl(toolbar);
    //     });
    //     AMap.plugin('AMap.Scale', function () {
    //       //异步加载插件
    //       const scale = new AMap.Scale();
    //       map.addControl(scale);
    //     });

    //     map.on('complete', function () {
    //       // 地图图块加载完成后触发
    //       console.log('地图加载完成了');
    //       // 会自动地控制地图级别，将标记和矢量图变得最大
    //       map.setFitView();
    //     });
    //   })
    //   .catch((e) => {
    //     console.log(e);
    //   });

    // return () => {
    //   map.destroy();
    //   console.log('地图被销毁了');
    // };
  }, []);

  // const fn = () => {
  //   map.setCenter([116.397428, 39.90923]);
  // };

  return (
    <Card title="地图" extra={<Button>天安门</Button>}>
      <div id="container" style={{ height: 400 }}></div>
    </Card>
  );
};

export default Index;
